<template>
    <div class="content">
      <van-nav-bar 
       title="站点详情"
       left-text="返回"
       class="header-top"
       left-arrow
       @click-left="onClickLeft"
     />
     <div class="title" style="margin-top: 44px;">{{title}}</div>
     <div class="button-item">
      <div class="button-item-top add-top">
        <div class="button-title">室分系统选择:</div>
        <van-button :type="primaryType" @click="clickImg(0)">1#室分</van-button>
        <van-button :type="primaryType1" @click="clickImg(1)">3#室分</van-button>
        <van-button :type="primaryType2" @click="clickImg(2)">8#室分</van-button>
      </div>
     </div>
     <div class="imgItem">
      <canvas-img 
        ref="canvas"
        id="canvasId2" 
        :floor="true" 
        :plus="true"
        :width="canvasWidth"
        :height = "canvasHeight"
        ></canvas-img>
     </div>
    </div>
  </template>
  
  <script>
  // import dxq  from '../../assets/dxq.png';
import canvasImg from '@/components/canvasImg'
  export default {
    name: 'rfifDetail',
    components:{
      canvasImg
    },
    data() {
      return {
        PopupData: {
          title:'',
        },
        primaryType: 'primary',
        primaryType1: 'default',
        primaryType2: 'default',
        value1:0,
        title: '',
        active: 0,
        value: '',
        scale:1,
        canvasWidth:0,
        canvasHeight:0,
      };
    },
    created(){
      this.title = this.$route.query.title
      // console.log(this.$route.query.title)
      this.canvasWidth = window.screen.width;
      this.canvasHeight = window.screen.height - 170;
    },
    methods: {
      clickImg(type){
        // this.primaryType='default'
        if(type == 0){
          this.primaryType='primary'
          this.primaryType1='default'
          this.primaryType2='default'
        }else if(type == 1){
          this.primaryType1='primary'
          this.primaryType2='default'
          this.primaryType='default'
        }else if(type == 2){
          this.primaryType2='primary'
          this.primaryType1='default'  
          this.primaryType='default'  
        }
        
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      onSearch() {
      },
      onConfirm() {
      },
      onCancel() {
      },
      zoomIn(){
        this.scale += 0.1;
      },
      zoomOut(){
        this.scale -= 0.1;
      }
    },
  };
  </script>
  
  <style lang="less" scoped>
  ::v-deep .van-nav-bar__content {
   background-color: #fff;
   border-bottom: 1px #ccc solid;
  }
  ::v-deep .van-nav-bar__title{
    color: #000;
  }
  ::v-deep .van-nav-bar .van-icon{
    color: #02a7f0;
  }
  ::v-deep .van-nav-bar__text{
  color: #02a7f0;
  }
  ::v-deep .van-tab--active{
    color: #eb4b4b;
  }
  ::v-deep .van-cell-group {
      margin: 13px 0;
  }
  ::v-deep .van-cell__title{
   font-size: 18px;
   color: #000;
  }
  .item{
    font-size: 14px;
    display: flex;
    padding: 0 7%;
    height: 30px;
    justify-content: space-between;
  }
  .content{
      background-color: #fff;
      user-select: none;
      overflow: hidden;
  }
  .title{
      font-size: 18px;
      background-color: #fff;
      height: 42px;
      margin: 5px 10px;
      line-height: 42px;
      padding: 0 10px;
      border-bottom:1px #ccc solid;
  }
  .button-item{
    padding: 10px 0;
  }
  .button-item-top{
    display: flex;
    padding: 0 5px;
    font-size: 18px;
    justify-content: space-between;
    align-items: center;
  }
  .button-title{
    display:inline-block; 
    font-size: 16px;
  }
  .tips-bg{
    background: #fff;
    height: 50%;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .tips-header{
    text-align: center;
  }
  .img-item{
    display: flex;
    color: #000;
  }
  .imgItem{
    overflow: hidden;
  }
  .devices-btn-right{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction:column;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    border-top: 1px solid  rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
    button{
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 0;
      border-top: none;
      &:first-child{
        height: 30px;
      }
      &:last-child{
        height: 30px;
      }
    }
  }
  </style>